<template>
	<div class="TabsMain">
		<div class="head">
			<ul>
				<li :class="{action:'uploading' == action}" @click="jump('uploading')">正在上传</li>
				<li :class="{action:'uploadSuccess' == action}" @click="jump('uploadSuccess')">上传成功</li>
				<li :class="{action:'uploadFail' == action}" @click="jump('uploadFail')">上传失败</li>
			</ul>
		</div>
		<div class="content scrollbar size" id="style-2">
			<transition-group name="slide-left">
				<uploading v-show="'uploading' == action" key='uploading'></uploading>
				<uploadSuccess v-show="'uploadSuccess' == action" key='uploadSuccess'></uploadSuccess>
				<uploadFail v-show="'uploadFail' == action" key="uploadFail"></uploadFail>
			</transition-group>
		</div>
	</div>
</template>

<script>
	import uploading from './Upload.vue'
	import uploadSuccess from './UploadSuccess.vue'
	import uploadFail from './UploadFail.vue'
	export default{
		data(){
			return{
				action:'uploading'
			}
		},
		components:{
			uploading,
			uploadSuccess,
			uploadFail
		},
		mounted() {
			this.$router.replace('/home/personalCenter')
		},
		methods:{
			jump(path){
				this.action = path
			}
		},
	}
</script>

<style scoped="scoped">
	.content{
		position: absolute;
		top: 52%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.size{
		width: 90%;
		height: calc(100% - 150px);
		background-color: #ffffff;
		box-sizing: border-box;
	}
	.TabsMain{
		width: 100%;
		height: calc(100% - 60px);
		overflow: hidden;
		position: absolute;
		bottom: 0;
		background-color: #e9eef3;
	}
	.head{
		height: 50px;
		width: 100%;
		background-color: #c2cae4;
		padding-left: 10px;
		box-sizing: border-box;
	}
	.head ul li{
		float: left;
		width: 250px;
		line-height: 50px;
		border-radius: 20px 20px 0 0;
		cursor: pointer;
		font-size: 22px;
	}
	.action{
		background-color:#e9eef3 ;
	}
</style>
